<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>商家管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/bootstrap/js/jquery-2.1.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>商家管理</h1>
        <!-- 搜索表单 -->
        <form action="${pageContext.request.contextPath}/shangjia/list" method="get" class="form-inline mb-3">
            <div class="form-group mr-2">
                <input type="text" name="business_name" value="${business.business_name}" class="form-control" placeholder="商家名称">
            </div>
            <div class="form-group mr-2">
                <input type="text" name="business_contact" value="${business.business_contact}" class="form-control" placeholder="联系人">
            </div>
            <div class="form-group mr-2">
                <input type="text" name="business_phone" value="${business.business_phone}" class="form-control" placeholder="联系电话">
            </div>
            <button type="submit" class="btn btn-primary">搜索</button>
        </form>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>商家ID</th>
                            <th>商家名称</th>
                            <th>商家描述</th>
                            <th>联系人</th>
                            <th>联系电话</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach items="${pageInfo.list}" var="shangjia">
                            <tr>
                                <td>${shangjia.business_id}</td>
                                <td>${shangjia.business_name}</td>
                                <td>${shangjia.business_desc}</td>
                                <td>${shangjia.business_contact}</td>
                                <td>${shangjia.business_phone}</td>
                                <td>${shangjia.is_delete}</td>
                                <td>
                                    <a href="${pageContext.request.contextPath}/shangjia/huixian?business_id=${shangjia.business_id}" class="btn btn-primary btn-sm">编辑</a>
                                    <a href="${pageContext.request.contextPath}/shangjia/delete?business_id=${shangjia.business_id}" class="btn btn-danger btn-sm">删除</a>
                                </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
                <a href="add" class="btn btn-success">添加新商家</a>
                
                <!-- 分页导航 -->
                <div style="text-align: center;">
                    <nav aria-label="Page navigation" style="display: inline-block;">
                        <ul class="pagination">
                            <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                                <a href="${pageContext.request.contextPath}/shangjia/list?currentPage=1&pageSize=${pageInfo.pageSize}&business_name=${param.business_name}&business_contact=${param.business_contact}&business_phone=${param.business_phone}" aria-label="First">
                                    <span aria-hidden="true">首页</span>
                                </a>
                            </li>
                            <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                                <a href="${pageContext.request.contextPath}/shangjia/list?currentPage=${pageInfo.pageNum - 1}&pageSize=${pageInfo.pageSize}&business_name=${param.business_name}&business_contact=${param.business_contact}&business_phone=${param.business_phone}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <c:set var="startPage" value="${pageInfo.pageNum - 4}" />
                            <c:if test="${startPage < 1}">
                                <c:set var="startPage" value="1" />
                            </c:if>
                            <c:set var="endPage" value="${startPage + 9}" />
                            <c:if test="${endPage > pageInfo.pages}">
                                <c:set var="endPage" value="${pageInfo.pages}" />
                                <c:if test="${endPage - startPage + 1 < 10}">
                                    <c:set var="startPage" value="${endPage - 9}" />
                                    <c:if test="${startPage < 1}">
                                        <c:set var="startPage" value="1" />
                                    </c:if>
                                </c:if>
                            </c:if>
                            <c:forEach begin="${startPage}" end="${endPage}" var="i">
                                <li class="${i == pageInfo.pageNum ? 'active' : ''}">
                                    <a href="${pageContext.request.contextPath}/shangjia/list?currentPage=${i}&pageSize=${pageInfo.pageSize}&business_name=${param.business_name}&business_contact=${param.business_contact}&business_phone=${param.business_phone}">${i}</a>
                                </li>
                            </c:forEach>
                            <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                                <a href="${pageContext.request.contextPath}/shangjia/list?currentPage=${pageInfo.pageNum + 1}&pageSize=${pageInfo.pageSize}&business_name=${param.business_name}&business_contact=${param.business_contact}&business_phone=${param.business_phone}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                                <a href="${pageContext.request.contextPath}/shangjia/list?currentPage=${pageInfo.pages}&pageSize=${pageInfo.pageSize}&business_name=${param.business_name}&business_contact=${param.business_contact}&business_phone=${param.business_phone}" aria-label="Last">
                                    <span aria-hidden="true">尾页</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <div style="margin-top: 10px;">
                        <span>当前第${pageInfo.pageNum}页/共${pageInfo.pages}页，共${pageInfo.total}条数据</span>
                        每页显示
                        <select name="pageSize" onchange="changePageSize(this.value)">
                            <option value="5" <c:if test="${pageInfo.pageSize == 5}">selected</c:if>>5</option>
                            <option value="10" <c:if test="${pageInfo.pageSize == 10}">selected</c:if>>10</option>
                            <option value="15" <c:if test="${pageInfo.pageSize == 15}">selected</c:if>>15</option>
                            <option value="20" <c:if test="${pageInfo.pageSize == 20}">selected</c:if>>20</option>
                        </select>条数据
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    // 改变每页显示条数
    function changePageSize(pageSize) {
        // 获取当前页码
        var currentPage = ${pageInfo.pageNum};
        // 保留当前页码，而不是跳转到第一页
        window.location.href = "${pageContext.request.contextPath}/shangjia/list?currentPage=" + currentPage + "&pageSize=" + pageSize + "&business_name=${param.business_name}&business_contact=${param.business_contact}&business_phone=${param.business_phone}";
    }
    </script>
</body>
</html>